<template>
    <view class="device-manage pd-v-24">


        <view class="device-manage__header">
            <u--form
                labelWidth="80"
                labelPosition="left"
                :model="form"
            >
                <view class="border8 pd-l-24 bg-white mr-t-20">
                    <u-form-item
                        label="关联门店"
                        prop="storeId"
                        borderBottom
                        @click="showPicker = true"
                    >
                        <u--input
                            v-model.trim="form.storeId"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请选择关联门店"
                            readonly
                            suffixIcon="arrow-down"
                            :suffixIconStyle="{marginRight:'18rpx'}"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="设备名称"
                        prop="name"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="form.name"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入设备名称"
                            @change="search"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="设备编号"
                        prop="number"
                        borderBottom
                    >
                        <u--input 
                            v-model.trim="form.number"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入设备编号"
                            @change="search"
                        ></u--input>
                    </u-form-item>
                </view>
            </u--form>

            <view class="flex flex-center mr-t-20">
                <view class="status-item box income-total flex-1 pd-v-16 pd-h-16 mr-r-8 border8 position-r" :class="{active: form.status === '1'}" @click="setStatus('1')">
                    <image src="@/static/online.png" class="total-bg position-a full-w full-h" mode="aspectFill"></image>
                    <view class="color-note font28 lh-40 position-r">在线设备</view>
                    <view class="color-default font36 lh-50 mr-t-8 bold position-r">{{cardData?.onLine || 0}}</view>
                </view>
                
                <view class="status-item box bg-default flex-1 pd-v-16 pd-h-16 mr-v-8 border8 position-r" :class="{active: form.status === '0'}" @click="setStatus('0')">
                    <image src="@/static/offline.png" class="total-bg position-a full-w full-h" mode="aspectFill"></image>
                    <view class="color-note font28 lh-40 position-r">离线设备</view>
                    <view class="color-default font36 lh-50 mr-t-8 bold position-r">{{cardData?.offline || 0}}</view>
                </view>

                <!-- <view class="status-item box shop-total flex-1 pd-v-16 pd-h-16 mr-l-8 border8 position-r" :class="{active: form.status === '2'}" @click="setStatus('2')">
                    <image src="@/static/error.png" class="total-bg position-a full-w full-h" mode="aspectFill"></image>
                    <view class="color-note font28 lh-40 position-r">故障设备</view>
                    <view class="color-default font36 lh-50 mr-t-8 bold position-r">322</view>
                </view> -->
            </view>
        </view>
          
        
        <view class="device-manage__body">
            <view class="device-item border8 pd-v-24 bg-white mr-t-20" v-for="(item,index) in list" :key="'check'+index">
                <view class="device-item__body pd-t-32 pd-b-24 border-b">
                    <view class="font32 lh-44 bold color-default">
                        {{item.name}}
                    </view>
                    
                    <view class="mr-t-8 flex flex-center">
                        <view class="color-info flex-1 font26 lh-36">
                            {{item.repairPhone}}
                        </view>
                    </view>
                    
                    
                    <view class="mr-t-20 flex flex-center">
                        <view class="color-info flex-1 font26 lh-36">
                            {{item.detailedAddress}}
                        </view>
                    </view>

                    
                    
                    <view class="mr-t-20 flex flex-center" v-if="item.remark">
                        <view class="color-note flex-1 font26 lh-36">
                           备注： {{item.remark}}
                        </view>
                    </view>
                    
                </view>

                <view class="device-item__footer pd-h-16 pd-v-24 flex flex-center">
                    <view class="flex-1 flex font26 lh-36 color-main">
                        {{item.status == 0 ? '离线' : item.status == 1 ? '在线' : item.status == 2 ? '故障' : ''}}
                    </view>
                        <u-button plain :customStyle="{height:'60rpx',marginLeft:'16rpx',width:'152rpx'}" shape="circle" color="#cccccc"  text="删除" @click="deleteItem(item,index)"></u-button>

                        <u-button plain :customStyle="{height:'60rpx',marginLeft:'16rpx',width:'152rpx'}" shape="circle" color="#cccccc"  text="修改" @click="editItem(item,index)"></u-button>


                </view>
                
                
            </view>
              
        </view>

        <view class="device-manage__footer position-f flex flex-j-center flex-center full-w">
            <u-button :customStyle="{height:'88rpx',width:'600rpx'}" shape="circle" color="#35BE65"  text="新增充电桩" @click="deviceAdd"></u-button>
        </view>

        <u-picker :show="showPicker" :columns="columns" keyName="name" :closeOnClickOverlay="true" @cancel="showPicker = false" @close="showPicker = false" @confirm="pickerConfirm"></u-picker>

    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { deviceList,deviceDelete,allStoreList,deviceCardData } from '@/api/proxy.js'


const store = useStore();


const form = ref({
    storeId: '',
    number:'',
    name:'',
    status: ''
});
const showPicker = ref(false);
const timer = ref(null);
const list = ref([])
const total = ref(0);
const params = ref({
    pageNum: 1,
    pageSize: 10
})
const columns = ref([[]])
const cardData = ref({})


onShow(() => {
    
})

onLoad(() => {
    getDeviceList()
    getAllStoreList()
    getDeviceCardData()
})


onReachBottom(() => {
    if(list.value.length < total.value) {
        params.value.pageNum++;
        getDeviceList()
    }
})

const getDeviceCardData = () => { 
    deviceCardData().then(res => {
        if(res.code === 200){
            cardData.value = res.data
        }
    })
}

const getAllStoreList = () => {
    allStoreList().then(res => {
        if(res.code == 200) {
            columns.value = [res.data]
            
        }
    })
}

const setStatus = (status) => {
    // return;
    if(status == form.value.status) {
        form.value.status = '';
    } else {
        form.value.status = status;
    }
    
    list.value = [];
    params.value.pageNum = 1;
    getDeviceList()
}
const getDeviceList = () => { 
    uni.showLoading({
        title: '加载中...',
        mask: true
    });

    let formParams = {...form.value};

    let storeItem = columns.value[0].find(item => item.name == formParams.storeId)

    if(storeItem) {
        formParams.storeId = storeItem.id
    }
    
    deviceList({...params.value,...formParams}).then(res => {
        uni.hideLoading()
        if(res.code == 200) {
            list.value = [...list.value,...res.rows]
            total.value = res.total
        }
    }).catch(err => {
        uni.hideLoading()
        console.log(err)
    })
};


const search = () => {
    clearTimeout(timer.value);
    timer.value = setTimeout(() => {
        list.value = [];
        params.value.pageNum = 1;
        getDeviceList()
    },1000)
}

const timeConfirm = (e) => {
    console.log('confirm', e);
    show.value = false;
};

const pickerConfirm = (e) => {
    console.log('confirm', e);
    
    let storeItem = columns.value[0].find(item => item.id == e.value[0].id);

    if(storeItem) {
        form.value.storeId = storeItem.name
    }
    search()
    
    showPicker.value = false;
};

const deviceAdd = () => {
    uni.navigateTo({
        url: '/sub_proxy/pages/deviceAdd/deviceAdd'
    })
}

const deleteItem = (item,index) => {
    uni.showModal({
        title: '提示',
        content: '确认删除该设备？',
        success: function (res) {
            if (res.confirm) {
                deviceDelete(item.id).then(res => {
                    if(res.code == 200) {
                        list.value.splice(index,1)
                        uni.showToast({
                            title: '删除成功',
                            icon: 'none'
                        })
                    }else {
                              uni.showToast({
                                  title: res.msg,
                                  icon: 'none'
                              })
                          }
                })
            }
        }
    })
}

const editItem = (item,index) => {
    uni.navigateTo({
        url: '/sub_proxy/pages/deviceAdd/deviceAdd?id='+item.id
    })
}

</script>

<style scoped lang="scss">
.device-manage {
    
    background:#F7F7F7;
    min-height:100vh;
    

    .status-item  {
        border:4rpx solid #f7f7f7;

        &.active {
            border:4rpx solid #35BE65;
        }
    }


    .income-total {
        background: #F8FFF8;
    }

    .shop-total {
        background: #FFFAF8;
    }

    .total-bg {
      left:0;
      top:0;
    }
    
    .device-manage__body {
        padding-bottom:256rpx;
        .device-item {
            .desc {
                width:130rpx;
            }

            .border-b {
                border-bottom:1px solid #EEEEEE;
            }
        }
    }

    .device-manage__footer {
        left:0;
        bottom:76rpx;
    }
}
</style>
